<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册博客</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_logon.css">
    <script src="js/jQuery.min.js"></script>

</head>
<body>


    <!-- 导航栏 -->
    <div class="nav">
        <img src="Imag/导航栏头像.png" alt="这是导航栏头像">
        <!-- span 标签不独占一行, 是一个小盒子 -->
        <span class="title"> 我的博客系统 </span>
        <div class="spacer"></div>
        <!-- # 在a标签中表示占位符 -->
        <a href="blog_list.html">登录</a>
        
        
    </div>

    <!-- 整个页面 -->
    <div class="logon_container">
        <!-- 注册页面 -->
        <div class="logon">
            <h3>欢迎注册博客</h3>
            <p>乐在交流~</p>

                <div class="row">
                    <input type="text" id="name" placeholder="昵称 (长度为 40 个字符以内)" >
                </div>
    
                <div class="row">
                    <input type="text" id="username" placeholder="用户名 (长度为 4 - 20 个字符)" >
                </div>
    
                <div class="row">
                    <input type="password" id="password1" placeholder="密码 (长度为 8 - 20 个字符)" >
                </div>
    
                <div class="row">
                    <input type="password" id="password2" placeholder="重复密码" >
                </div>

                <div class="row">
                    <input type="text" id="emailId" placeholder="请输入电子邮箱" >
                </div>

                <div class="row">
                    <input type="text" id="code" placeholder="请输入验证码" >
                </div>

                <div class="row">
                    <button id="submit1" class="button" type="button">立即验证</button>
                </div>
    
                <div class="row">
                    <button id="submit" class="button" type="button">立即注册</button>
                </div>

            
        </div>    

    </div>

    <script>
        // 获取标签内容
        let name = document.querySelector('#name'); // 昵称
        let username = document.querySelector('#username'); // 用户名
        let password1 = document.querySelector('#password1'); // 首次密码
        let password2 = document.querySelector('#password2'); // 重复密码
        let emailId = document.querySelector('#emailId'); // 邮箱
        let code = document.querySelector('#code');
        let submit = document.querySelector('#submit');
        let submit1 = document.querySelector('#submit1');


        let clock = '';
        var nums = 60;
        let btn;

        // 进行邮箱正则校验
        submit1.onclick = function() {

            if(emailId.value == '') {
                alert('邮箱不能为空!');
                return;
            }
            let a =/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
            console.log(emailId);
            if(a.test(emailId.value)) {

                $.ajax({
                    type:'post',
                    contentType:'application/json; charset = utf8',
                    url:'email',
                    data:JSON.stringify({'emailId':emailId.value}),
                    success:function(body) {
                        if(body.flag === true) {
                            alert('邮箱发送成功, 请注意查收!');
                            return;
                        }else {
                            alert('邮箱验证失败, 请检查邮箱是否正确!');
                            return;
                        }
                    }
                });
            }else {
                alert('邮箱格式错误, 请重新输入!');
                return;
            }

            btn = submit1;
            btn.ariaDisabled = true; // 将按钮设置为不可点击
            btn.value = setInterval(doLoop, 1000); 

            
        }

        function doLoop() {
            nums--;
            if(nums > 0) {
                btn.value = nums + '秒后重试';

            }else {
                clearInterval(clock);// 清除定时器
                btn.ariaDisabled = false;
                btn.value = "重新获取验证码"
                nums = 60;
            }
        }
        
        // 点击提交以后获取信息
        submit.onclick = function() {        
            
            let body = {
                // 提交后的信息全部构造到body中
                'name':name.value,
                'username':username.value,
                'password':password1.value,
                'code': code.value
                // 'password2':password2.value
            };

            // 这是你前端发的json字符串 ,但是你后端的user里面没有 password1和2,你把password2删了,然后把password1的1去掉


            if(body.name == "") {
                alert('昵称不能为空, 请重新输入!');
                return;
            }

            if(body.username <= 0) {
                console.log(body.username);
                alert('用户名不能为空, 请重新输入!');
                return;
            }

            if(body.password <= 0 ) {
                alert('密码不能为空, 请重新输入!');
                return;
            }

            if(password2.value <= 0) {
                alert('请输入重复密码!');
                return;
            }

            if(body.name.length > 40) {
                console.log(body.name.length);
                alert('昵称长度在 40 个字符以内, 请重新输入!');
                return;
            }

            if(body.username.length < 4 || body.username.length > 20) {
                alert('用户名长度在 4- 20 个字符以内, 请重新输入!');
                return;
            }

            if(body.password.length < 8 || password2.value.length > 20) {
                alert('密码长度在 4 - 20 字符以内, 请重新输入!');
                return;
            }

            if(body.password === password2.value) {
                console.log(body.password);
            }else {
                alert('密码不一致, 请重新输入!');
                return;
            }

            if(code.value == '') {
                alert('验证码不能为空!');
                return;
            }

            // 前端这里还有一点就是 你不用把password1和2都传出去
            // 直接在前端里比较password1和2相等不相等
            // 直接 用 标签内容.value 进行比较就OK了 是的 用 == 或者 或 === 我更喜欢不等 行了 你再品一会 已经回味了 好的 我下了 OK
            

            // 密码判断完毕已经符合要求, 发送给后端进行对比处理
            $.ajax({
               type:'post',
               contentType:'application/json; charset = utf8',
               url:'logon',
               data:JSON.stringify(body),
               success:function(body) {
                    console.log(body);
                    if(body.issuccess == 3) {
                        alert('注册成功，即将跳转登陆！');
                        location.assign('login.html');
                    }else if(body.issuccess == 2){
                        alert('该用户已存在, 请重新输入!');
                    }else {
                        alert('验证码错误, 请重新输入!');
                        
                    }
               }
            });
        }


    </script>
</body>
</html>